<template>
  <div class="notification-center">
    <!-- 通知触发按钮 -->
    <div class="notification-trigger" @click="togglePanel">
      <button :class="{ 'has-unread': unreadCount > 0 }" class="trigger-btn">
        <svg fill="none" viewBox="0 0 24 24">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="2"/>
          <path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="2"/>
        </svg>

        <!-- 未读消息计数 -->
        <div v-if="unreadCount > 0" class="unread-badge">
          <span>{{ displayUnreadCount }}</span>
        </div>

        <!-- 新消息指示器 -->
        <div v-if="hasNewNotifications" class="new-indicator"></div>
      </button>
    </div>

    <!-- 通知面板 -->
    <div v-if="showPanel" class="notification-panel" @click.stop>
      <!-- 面板头部 -->
      <div class="panel-header">
        <div class="header-title">
          <h3>通知中心</h3>
          <span v-if="unreadCount > 0" class="unread-info">{{ unreadCount }}条未读</span>
        </div>

        <div class="header-actions">
          <button :disabled="unreadCount === 0" class="action-btn" @click="markAllAsRead">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2"/>
            </svg>
            全部已读
          </button>

          <button class="action-btn" @click="openSettings">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <path d="m12 1 2.09 2.09L16.18 1 17 1.82l-1.09 2.09L18 6l-.82.82-2.09-1.09L14.18 8 12 6l-2.09 2.09L7.82 6 7 5.18l1.09-2.09L6 1l.82-.82 2.09 1.09L10.82 1 12 1z" stroke="currentColor" stroke-width="2"/>
            </svg>
            设置
          </button>

          <button class="close-btn" @click="closePanel">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 筛选标签 -->
      <div class="filter-tabs">
        <button
          v-for="filter in filterTabs"
          :key="filter.key"
          :class="{ 'active': activeFilter === filter.key }"
          class="filter-tab"
          @click="setActiveFilter(filter.key)"
        >
          <span class="tab-icon" v-html="filter.icon"></span>
          <span class="tab-label">{{ filter.label }}</span>
          <span v-if="filter.count > 0" class="tab-count">{{ filter.count }}</span>
        </button>
      </div>

      <!-- 通知列表 -->
      <div class="notifications-container">
        <div v-if="isLoading" class="loading-state">
          <div class="loading-spinner">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <span>加载通知中...</span>
        </div>

        <div v-else-if="filteredNotifications.length === 0" class="empty-state">
          <div class="empty-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="2"/>
              <path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="2" y2="14"/>
            </svg>
          </div>
          <h4>暂无{{ getFilterName(activeFilter) }}通知</h4>
          <p>所有通知都已处理完毕</p>
        </div>

        <div v-else class="notifications-list">
          <div
            v-for="notification in filteredNotifications"
            :key="notification.id"
            :class="{
              'is-unread': !notification.isRead,
              'is-important': notification.priority === 'high',
              'is-selected': selectedNotifications.has(notification.id)
            }"
            class="notification-item"
            @click="handleNotificationClick(notification)"
          >
            <!-- 选择框 -->
            <div v-if="selectionMode" class="selection-checkbox">
              <input
                :checked="selectedNotifications.has(notification.id)"
                type="checkbox"
                @change="toggleNotificationSelection(notification.id)"
                @click.stop
              />
              <span class="checkbox-custom"></span>
            </div>

            <!-- 通知图标 -->
            <div :class="notification.type" class="notification-icon">
              <div class="icon-background">
                <span v-html="getNotificationIcon(notification.type)"></span>
              </div>
              <div v-if="!notification.isRead" class="unread-dot"></div>
            </div>

            <!-- 通知内容 -->
            <div class="notification-content">
              <div class="notification-header">
                <h4 class="notification-title">{{ notification.title }}</h4>
                <div class="notification-meta">
                  <span class="notification-time">{{ formatTime(notification.createTime) }}</span>
                  <div v-if="notification.priority === 'high'" class="priority-badge">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="12"/>
                      <line stroke="currentColor" stroke-width="2" x1="12" x2="12.01" y1="16" y2="16"/>
                    </svg>
                    重要
                  </div>
                </div>
              </div>

              <div class="notification-body">
                <p class="notification-message">{{ notification.message }}</p>

                <!-- 附加内容 -->
                <div v-if="notification.data" class="notification-data">
                  <!-- 用户相关通知 -->
                  <div v-if="notification.data.user" class="notification-user">
                    <div class="user-avatar">
                      <img v-if="notification.data.user.avatar" :alt="notification.data.user.name" :src="notification.data.user.avatar" />
                      <div v-else class="avatar-placeholder">
                        {{ notification.data.user.name.charAt(0) }}
                      </div>
                    </div>
                    <span class="user-name">{{ notification.data.user.name }}</span>
                  </div>

                  <!-- 活动相关通知 -->
                  <div v-if="notification.data.activity" class="notification-activity">
                    <div class="activity-info">
                      <h5 class="activity-title">{{ notification.data.activity.title }}</h5>
                      <span class="activity-time">{{ formatDateTime(notification.data.activity.startTime) }}</span>
                    </div>
                  </div>

                  <!-- 媒体相关通知 -->
                  <div v-if="notification.data.media" class="notification-media">
                    <div class="media-thumbnail">
                      <img :alt="notification.data.media.name" :src="notification.data.media.thumbnail" />
                    </div>
                    <div class="media-info">
                      <h5 class="media-name">{{ notification.data.media.name }}</h5>
                      <span class="media-type">{{ notification.data.media.type }}</span>
                    </div>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div v-if="notification.actions && notification.actions.length > 0" class="notification-actions">
                  <button
                    v-for="action in notification.actions"
                    :key="action.key"
                    :class="action.type || 'default'"
                    class="action-btn"
                    @click.stop="handleActionClick(notification, action)"
                  >
                    <svg v-if="action.icon" fill="none" viewBox="0 0 24 24">
                      <path :d="action.icon" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    {{ action.label }}
                  </button>
                </div>
              </div>
            </div>

            <!-- 通知菜单 -->
            <div class="notification-menu">
              <button class="menu-trigger" @click.stop="toggleNotificationMenu(notification.id)">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="19" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="5" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>

              <div v-if="activeNotificationMenu === notification.id" class="menu-dropdown">
                <button class="menu-item" @click="markAsRead(notification)">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  {{ notification.isRead ? '标为未读' : '标为已读' }}
                </button>

                <button class="menu-item" @click="pinNotification(notification)">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  {{ notification.isPinned ? '取消置顶' : '置顶' }}
                </button>

                <button class="menu-item" @click="archiveNotification(notification)">
                  <svg fill="none" viewBox="0 0 24 24">
                    <polyline points="21,8 21,21 3,21 3,8" stroke="currentColor" stroke-width="2"/>
                    <rect height="5" stroke="currentColor" stroke-width="2" width="22" x="1" y="3"/>
                    <line stroke="currentColor" stroke-width="2" x1="10" x2="14" y1="12" y2="12"/>
                  </svg>
                  归档
                </button>

                <button class="menu-item danger" @click="deleteNotification(notification)">
                  <svg fill="none" viewBox="0 0 24 24">
                    <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div v-if="hasMore && !isLoading" class="load-more-section">
          <button class="load-more-btn" @click="loadMoreNotifications">
            加载更多通知
          </button>
        </div>
      </div>

      <!-- 批量操作栏 -->
      <div v-if="selectionMode && selectedNotifications.size > 0" class="bulk-actions-bar">
        <div class="selected-info">
          已选择 {{ selectedNotifications.size }} 条通知
        </div>

        <div class="bulk-actions">
          <button class="bulk-action-btn" @click="bulkMarkAsRead">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2"/>
            </svg>
            标为已读
          </button>

          <button class="bulk-action-btn" @click="bulkArchive">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="21,8 21,21 3,21 3,8" stroke="currentColor" stroke-width="2"/>
              <rect height="5" stroke="currentColor" stroke-width="2" width="22" x="1" y="3"/>
              <line stroke="currentColor" stroke-width="2" x1="10" x2="14" y1="12" y2="12"/>
            </svg>
            归档
          </button>

          <button class="bulk-action-btn danger" @click="bulkDelete">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" stroke="currentColor" stroke-width="2"/>
            </svg>
            删除
          </button>

          <button class="bulk-action-btn" @click="exitSelectionMode">
            取消选择
          </button>
        </div>
      </div>
    </div>

    <!-- 背景遮罩 -->
    <div v-if="showPanel" class="notification-backdrop" @click="closePanel"></div>

    <!-- 通知设置面板 -->
    <div v-if="showSettings" class="settings-panel" @click.stop>
      <div class="settings-header">
        <h3>通知设置</h3>
        <button class="close-btn" @click="closeSettings">
          <svg fill="none" viewBox="0 0 24 24">
            <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
            <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
          </svg>
        </button>
      </div>

      <div class="settings-content">
        <div class="settings-section">
          <h4>通知方式</h4>
          <div class="setting-group">
            <label class="setting-item">
              <input v-model="notificationSettings.browserNotifications" type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="setting-text">浏览器通知</span>
            </label>

            <label class="setting-item">
              <input v-model="notificationSettings.emailNotifications" type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="setting-text">邮件通知</span>
            </label>

            <label class="setting-item">
              <input v-model="notificationSettings.soundNotifications" type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="setting-text">声音提醒</span>
            </label>
          </div>
        </div>

        <div class="settings-section">
          <h4>通知类型</h4>
          <div class="setting-group">
            <label v-for="type in notificationTypes" :key="type.key" class="setting-item">
              <input v-model="notificationSettings.enabledTypes" :value="type.key" type="checkbox" />
              <span class="checkbox-custom"></span>
              <div class="setting-info">
                <span class="setting-text">{{ type.label }}</span>
                <span class="setting-desc">{{ type.description }}</span>
              </div>
            </label>
          </div>
        </div>

        <div class="settings-section">
          <h4>免打扰时间</h4>
          <div class="setting-group">
            <label class="setting-item">
              <input v-model="notificationSettings.doNotDisturb" type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="setting-text">启用免打扰</span>
            </label>

            <div v-if="notificationSettings.doNotDisturb" class="time-range-setting">
              <div class="time-input-group">
                <label>开始时间</label>
                <input v-model="notificationSettings.doNotDisturbStart" type="time" />
              </div>
              <div class="time-input-group">
                <label>结束时间</label>
                <input v-model="notificationSettings.doNotDisturbEnd" type="time" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="settings-footer">
        <button class="settings-btn secondary" @click="resetSettings">重置设置</button>
        <button class="settings-btn primary" @click="saveSettings">保存设置</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { Notify } from '@opentiny/vue'

// 接口定义
interface Notification {
  id: number
  type: 'activity' | 'comment' | 'like' | 'mention' | 'system' | 'media' | 'reminder'
  title: string
  message: string
  isRead: boolean
  isPinned?: boolean
  priority: 'low' | 'normal' | 'high'
  createTime: string
  data?: {
    user?: {
      id: number
      name: string
      avatar?: string
    }
    activity?: {
      id: number
      title: string
      startTime: string
    }
    media?: {
      id: number
      name: string
      type: string
      thumbnail: string
    }
    link?: string
  }
  actions?: NotificationAction[]
}

interface NotificationAction {
  key: string
  label: string
  type?: 'primary' | 'secondary' | 'danger'
  icon?: string
}

interface FilterTab {
  key: string
  label: string
  icon: string
  count: number
}

// Props & Emits
interface Props {
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
  maxNotifications?: number
  autoRefresh?: boolean
  refreshInterval?: number
  showBadge?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  position: 'top-right',
  maxNotifications: 50,
  autoRefresh: true,
  refreshInterval: 30000,
  showBadge: true
})

const emit = defineEmits<{
  'notification-click': [notification: Notification]
  'notification-action': [notification: Notification, action: NotificationAction]
  'settings-changed': [settings: any]
}>()

// 响应式数据
const showPanel = ref(false)
const showSettings = ref(false)
const isLoading = ref(false)
const hasMore = ref(true)
const selectionMode = ref(false)
const activeFilter = ref('all')
const activeNotificationMenu = ref<number | null>(null)
const hasNewNotifications = ref(false)

const notifications = ref<Notification[]>([])
const selectedNotifications = ref(new Set<number>())
const refreshTimer = ref<NodeJS.Timeout>()

// 通知设置
const notificationSettings = ref({
  browserNotifications: true,
  emailNotifications: false,
  soundNotifications: true,
  doNotDisturb: false,
  doNotDisturbStart: '22:00',
  doNotDisturbEnd: '08:00',
  enabledTypes: ['activity', 'comment', 'like', 'mention', 'system', 'media', 'reminder']
})

// 通知类型定义
const notificationTypes = [
  { key: 'activity', label: '活动通知', description: '活动创建、更新、提醒等' },
  { key: 'comment', label: '评论通知', description: '新评论、回复等' },
  { key: 'like', label: '点赞通知', description: '内容被点赞、收藏等' },
  { key: 'mention', label: '提及通知', description: '被@提及时的通知' },
  { key: 'system', label: '系统通知', description: '系统维护、更新等' },
  { key: 'media', label: '媒体通知', description: '媒体处理完成、分享等' },
  { key: 'reminder', label: '提醒通知', description: '自定义提醒、日程等' }
]

// 计算属性
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.isRead).length
})

const displayUnreadCount = computed(() => {
  if (unreadCount.value > 99) return '99+'
  return unreadCount.value.toString()
})

const filterTabs = computed((): FilterTab[] => {
  const tabs: FilterTab[] = [
    {
      key: 'all',
      label: '全部',
      icon: '<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/></svg>',
      count: notifications.value.length
    },
    {
      key: 'unread',
      label: '未读',
      icon: '<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>',
      count: notifications.value.filter(n => !n.isRead).length
    }
  ]

  // 动态添加类型筛选
  notificationTypes.forEach(type => {
    const count = notifications.value.filter(n => n.type === type.key).length
    if (count > 0) {
      tabs.push({
        key: type.key,
        label: type.label,
        icon: getNotificationIcon(type.key as any),
        count
      })
    }
  })

  return tabs
})

const filteredNotifications = computed(() => {
  let filtered = notifications.value

  if (activeFilter.value === 'unread') {
    filtered = filtered.filter(n => !n.isRead)
  } else if (activeFilter.value !== 'all') {
    filtered = filtered.filter(n => n.type === activeFilter.value)
  }

  // 排序：置顶 > 未读 > 时间倒序
  return filtered.sort((a, b) => {
    if (a.isPinned && !b.isPinned) return -1
    if (!a.isPinned && b.isPinned) return 1
    if (!a.isRead && b.isRead) return -1
    if (a.isRead && !b.isRead) return 1
    return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
  })
})

// 方法
const togglePanel = () => {
  showPanel.value = !showPanel.value
  if (showPanel.value) {
    loadNotifications()
    hasNewNotifications.value = false
  }
}

const closePanel = () => {
  showPanel.value = false
  activeNotificationMenu.value = null
  selectionMode.value = false
  selectedNotifications.value.clear()
}

const openSettings = () => {
  showSettings.value = true
}

const closeSettings = () => {
  showSettings.value = false
}

const setActiveFilter = (filter: string) => {
  activeFilter.value = filter
}

const getFilterName = (filter: string): string => {
  const tab = filterTabs.value.find(t => t.key === filter)
  return tab?.label || '通知'
}

const loadNotifications = async () => {
  if (isLoading.value) return

  try {
    isLoading.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))

    const mockNotifications: Notification[] = [
      {
        id: 1,
        type: 'activity',
        title: '新活动邀请',
        message: '张小明邀请您参加"家庭聚餐"活动',
        isRead: false,
        priority: 'high',
        createTime: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
        data: {
          user: { id: 2, name: '张小明', avatar: '/images/avatars/user2.jpg' },
          activity: { id: 1, title: '家庭聚餐', startTime: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString() }
        },
        actions: [
          { key: 'accept', label: '接受邀请', type: 'primary' },
          { key: 'decline', label: '婉拒', type: 'secondary' }
        ]
      },
      {
        id: 2,
        type: 'comment',
        title: '新评论',
        message: '李小红在您的活动中发表了评论',
        isRead: false,
        priority: 'normal',
        createTime: new Date(Date.now() - 15 * 60 * 1000).toISOString(),
        data: {
          user: { id: 3, name: '李小红', avatar: '/images/avatars/user3.jpg' }
        },
        actions: [
          { key: 'reply', label: '回复', type: 'primary' },
          { key: 'view', label: '查看', type: 'secondary' }
        ]
      },
      {
        id: 3,
        type: 'like',
        title: '收到点赞',
        message: '您的照片"美好时光"收到了3个赞',
        isRead: true,
        priority: 'low',
        createTime: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
        data: {
          media: {
            id: 1,
            name: '美好时光',
            type: 'image',
            thumbnail: '/images/media/thumb1.jpg'
          }
        }
      },
      {
        id: 4,
        type: 'mention',
        title: '@提及',
        message: '王大华在评论中提到了您',
        isRead: false,
        priority: 'normal',
        createTime: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
        data: {
          user: { id: 4, name: '王大华', avatar: '/images/avatars/user4.jpg' }
        },
        actions: [
          { key: 'view', label: '查看', type: 'primary' }
        ]
      },
      {
        id: 5,
        type: 'system',
        title: '系统更新',
        message: '新版本已发布，包含多项功能改进',
        isRead: true,
        priority: 'normal',
        isPinned: true,
        createTime: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
        actions: [
          { key: 'update', label: '立即更新', type: 'primary' },
          { key: 'later', label: '稍后提醒', type: 'secondary' }
        ]
      }
    ]

    notifications.value = mockNotifications

  } catch (error) {
    console.error('Load notifications failed:', error)
    Notify({
      type: 'error',
      message: '加载通知失败',
      position: 'top-right'
    })
  } finally {
    isLoading.value = false
  }
}

const loadMoreNotifications = async () => {
  // 模拟加载更多
  hasMore.value = false
}

const handleNotificationClick = (notification: Notification) => {
  if (selectionMode.value) {
    toggleNotificationSelection(notification.id)
    return
  }

  if (!notification.isRead) {
    markAsRead(notification)
  }

  emit('notification-click', notification)

  // 如果有链接，跳转
  if (notification.data?.link) {
    window.open(notification.data.link, '_blank')
  }
}

const handleActionClick = (notification: Notification, action: NotificationAction) => {
  emit('notification-action', notification, action)

  // 处理内置动作
  switch (action.key) {
    case 'accept':
    case 'decline':
      // 处理邀请响应
      handleInvitationResponse(notification, action.key === 'accept')
      break
    case 'reply':
      // 处理回复
      handleReplyAction(notification)
      break
    case 'view':
      // 查看详情
      handleViewAction(notification)
      break
  }
}

const handleInvitationResponse = (notification: Notification, accepted: boolean) => {
  Notify({
    type: 'success',
    message: accepted ? '已接受邀请' : '已婉拒邀请',
    position: 'top-right'
  })

  // 标记为已读并移除操作按钮
  notification.isRead = true
  notification.actions = []
}

const handleReplyAction = (notification: Notification) => {
  closePanel()
  // 这里应该打开回复界面
}

const handleViewAction = (notification: Notification) => {
  closePanel()
  // 这里应该跳转到相关页面
}

const toggleNotificationSelection = (id: number) => {
  if (selectedNotifications.value.has(id)) {
    selectedNotifications.value.delete(id)
  } else {
    selectedNotifications.value.add(id)
  }
}

const toggleNotificationMenu = (id: number) => {
  activeNotificationMenu.value = activeNotificationMenu.value === id ? null : id
}

const markAsRead = (notification: Notification) => {
  notification.isRead = !notification.isRead

  Notify({
    type: 'success',
    message: notification.isRead ? '已标记为已读' : '已标记为未读',
    position: 'top-right'
  })
}

const markAllAsRead = () => {
  notifications.value.forEach(n => {
    if (!n.isRead) n.isRead = true
  })

  Notify({
    type: 'success',
    message: `已将 ${unreadCount.value} 条通知标记为已读`,
    position: 'top-right'
  })
}

const pinNotification = (notification: Notification) => {
  notification.isPinned = !notification.isPinned

  Notify({
    type: 'success',
    message: notification.isPinned ? '已置顶通知' : '已取消置顶',
    position: 'top-right'
  })
}

const archiveNotification = (notification: Notification) => {
  const index = notifications.value.findIndex(n => n.id === notification.id)
  if (index !== -1) {
    notifications.value.splice(index, 1)

    Notify({
      type: 'success',
      message: '通知已归档',
      position: 'top-right'
    })
  }
}

const deleteNotification = (notification: Notification) => {
  const index = notifications.value.findIndex(n => n.id === notification.id)
  if (index !== -1) {
    notifications.value.splice(index, 1)

    Notify({
      type: 'success',
      message: '通知已删除',
      position: 'top-right'
    })
  }
}

const bulkMarkAsRead = () => {
  const selectedIds = Array.from(selectedNotifications.value)
  notifications.value.forEach(n => {
    if (selectedIds.includes(n.id)) {
      n.isRead = true
    }
  })

  Notify({
    type: 'success',
    message: `已将 ${selectedIds.length} 条通知标记为已读`,
    position: 'top-right'
  })

  exitSelectionMode()
}

const bulkArchive = () => {
  const selectedIds = Array.from(selectedNotifications.value)
  notifications.value = notifications.value.filter(n => !selectedIds.includes(n.id))

  Notify({
    type: 'success',
    message: `已归档 ${selectedIds.length} 条通知`,
    position: 'top-right'
  })

  exitSelectionMode()
}

const bulkDelete = () => {
  const selectedIds = Array.from(selectedNotifications.value)
  notifications.value = notifications.value.filter(n => !selectedIds.includes(n.id))

  Notify({
    type: 'success',
    message: `已删除 ${selectedIds.length} 条通知`,
    position: 'top-right'
  })

  exitSelectionMode()
}

const exitSelectionMode = () => {
  selectionMode.value = false
  selectedNotifications.value.clear()
}

const saveSettings = () => {
  emit('settings-changed', notificationSettings.value)

  Notify({
    type: 'success',
    message: '设置已保存',
    position: 'top-right'
  })

  closeSettings()
}

const resetSettings = () => {
  notificationSettings.value = {
    browserNotifications: true,
    emailNotifications: false,
    soundNotifications: true,
    doNotDisturb: false,
    doNotDisturbStart: '22:00',
    doNotDisturbEnd: '08:00',
    enabledTypes: ['activity', 'comment', 'like', 'mention', 'system', 'media', 'reminder']
  }

  Notify({
    type: 'success',
    message: '设置已重置',
    position: 'top-right'
  })
}

const getNotificationIcon = (type: string): string => {
  const icons: Record<string, string> = {
    activity: '<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/></svg>',
    comment: '<svg viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2"/></svg>',
    like: '<svg viewBox="0 0 24 24" fill="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2"/></svg>',
    mention: '<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" stroke="currentColor" stroke-width="2"/></svg>',
    system: '<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m15.5-6.5l-4.24 4.24M7.76 7.76 3.52 3.52m12.96 12.96-4.24-4.24M7.76 16.24l-4.24 4.24" stroke="currentColor" stroke-width="2"/></svg>',
    media: '<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/><circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/><polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/></svg>',
    reminder: '<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/></svg>'
  }

  return icons[type] || icons.system
}

const formatTime = (timestamp: string): string => {
  const date = new Date(timestamp)
  const now = new Date()
  const diffTime = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  const diffHours = Math.floor(diffTime / (1000 * 60 * 60))
  const diffMinutes = Math.floor(diffTime / (1000 * 60))

  if (diffMinutes < 1) {
    return '刚刚'
  } else if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric'
    })
  }
}

const formatDateTime = (timestamp: string): string => {
  const date = new Date(timestamp)
  return date.toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const startAutoRefresh = () => {
  if (props.autoRefresh && props.refreshInterval > 0) {
    refreshTimer.value = setInterval(() => {
      if (!showPanel.value) {
        // 检查是否有新通知
        checkForNewNotifications()
      }
    }, props.refreshInterval)
  }
}

const checkForNewNotifications = async () => {
  // 模拟检查新通知
  const hasNew = Math.random() > 0.8
  if (hasNew) {
    hasNewNotifications.value = true

    // 如果启用了浏览器通知
    if (notificationSettings.value.browserNotifications) {
      showBrowserNotification('您有新的通知', '点击查看详情')
    }

    // 如果启用了声音提醒
    if (notificationSettings.value.soundNotifications) {
      playNotificationSound()
    }
  }
}

const showBrowserNotification = (title: string, body: string) => {
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, {
      body,
      icon: '/favicon.ico',
      tag: 'family-media-notification'
    })
  }
}

const playNotificationSound = () => {
  try {
    const audio = new Audio('/sounds/notification.mp3')
    audio.volume = 0.3
    audio.play().catch(e => console.log('Cannot play notification sound:', e))
  } catch (error) {
    console.log('Notification sound not available')
  }
}

// 生命周期
onMounted(() => {
  // 请求浏览器通知权限
  if ('Notification' in window && Notification.permission === 'default') {
    Notification.requestPermission()
  }

  startAutoRefresh()

  // 点击外部关闭面板
  document.addEventListener('click', (e) => {
    const target = e.target as Element
    if (!target.closest('.notification-center')) {
      activeNotificationMenu.value = null
    }
  })
})

onUnmounted(() => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
  }
})

// 暴露给父组件的方法
defineExpose({
  loadNotifications,
  markAllAsRead,
  addNotification: (notification: Notification) => {
    notifications.value.unshift(notification)
    hasNewNotifications.value = true
  },
  removeNotification: (id: number) => {
    const index = notifications.value.findIndex(n => n.id === id)
    if (index !== -1) {
      notifications.value.splice(index, 1)
    }
  }
})
</script>

<style lang="scss" scoped>
.notification-center {
  position: relative;

  .notification-trigger {
    .trigger-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #f3f4f6;
      border: none;
      border-radius: 8px;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #e5e7eb;
        color: #374151;
      }

      &.has-unread {
        background: #dbeafe;
        color: #1d4ed8;

        &:hover {
          background: #bfdbfe;
        }
      }

      svg {
        width: 20px;
        height: 20px;
      }

      .unread-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: #ef4444;
        color: white;
        border-radius: 10px;
        padding: 0.125rem 0.375rem;
        font-size: 0.7rem;
        font-weight: 600;
        min-width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
      }

      .new-indicator {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse 2s infinite;
      }
    }
  }

  .notification-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 420px;
    max-height: 80vh;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 50;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 1.5rem 1.5rem 1rem;
      border-bottom: 1px solid #f1f5f9;
      background: #f8fafc;

      .header-title {
        h3 {
          margin: 0 0 0.25rem 0;
          font-size: 1.1rem;
          font-weight: 600;
          color: #1e293b;
        }

        .unread-info {
          font-size: 0.8rem;
          color: #64748b;
        }
      }

      .header-actions {
        display: flex;
        gap: 0.5rem;

        .action-btn,
        .close-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 0.75rem;
          background: transparent;
          border: 1px solid #d1d5db;
          border-radius: 6px;
          color: #6b7280;
          cursor: pointer;
          font-size: 0.8rem;
          transition: all 0.2s ease;

          &:hover:not(:disabled) {
            background: #f9fafb;
            border-color: #9ca3af;
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }

        .close-btn {
          padding: 0.5rem;

          &:hover {
            color: #ef4444;
            border-color: #ef4444;
          }
        }
      }
    }

    .filter-tabs {
      display: flex;
      padding: 0.75rem 1rem;
      gap: 0.5rem;
      border-bottom: 1px solid #f1f5f9;
      overflow-x: auto;

      .filter-tab {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        color: #6b7280;
        cursor: pointer;
        font-size: 0.8rem;
        white-space: nowrap;
        transition: all 0.2s ease;

        &:hover {
          background: #f9fafb;
          border-color: #d1d5db;
        }

        &.active {
          background: #3b82f6;
          border-color: #3b82f6;
          color: white;
        }

        .tab-icon {
          :deep(svg) {
            width: 14px;
            height: 14px;
          }
        }

        .tab-count {
          background: rgba(255, 255, 255, 0.2);
          color: inherit;
          border-radius: 8px;
          padding: 0.125rem 0.375rem;
          font-size: 0.7rem;
          font-weight: 600;
          min-width: 16px;
          text-align: center;
        }

        &:not(.active) .tab-count {
          background: #f3f4f6;
          color: #6b7280;
        }
      }
    }

    .notifications-container {
      max-height: 50vh;
      overflow-y: auto;

      .loading-state,
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 2rem;
        color: #9ca3af;

        .loading-spinner svg,
        .empty-icon svg {
          width: 48px;
          height: 48px;
          margin-bottom: 1rem;
        }

        .loading-spinner svg {
          animation: spin 1s linear infinite;
        }

        h4 {
          margin: 0 0 0.5rem 0;
          color: #6b7280;
        }

        p {
          margin: 0;
          font-size: 0.9rem;
        }
      }

      .notifications-list {
        .notification-item {
          display: flex;
          gap: 0.75rem;
          padding: 1rem 1.5rem;
          border-bottom: 1px solid #f8fafc;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: #f9fafb;
          }

          &.is-unread {
            background: #f0f9ff;
            border-left: 3px solid #3b82f6;

            .notification-title {
              font-weight: 600;
            }
          }

          &.is-important {
            border-left-color: #f59e0b;

            .notification-icon {
              .icon-background {
                background: #fef3c7;
                border-color: #f59e0b;
              }
            }
          }

          &.is-selected {
            background: #eff6ff;
          }

          .selection-checkbox {
            display: flex;
            align-items: flex-start;
            margin-top: 0.25rem;

            input[type="checkbox"] {
              display: none;
            }

            .checkbox-custom {
              width: 16px;
              height: 16px;
              border: 2px solid #d1d5db;
              border-radius: 3px;
              position: relative;
              transition: all 0.2s ease;

              &::after {
                content: '✓';
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 10px;
                font-weight: bold;
                opacity: 0;
                transition: opacity 0.2s ease;
              }
            }

            input:checked + .checkbox-custom {
              background: #3b82f6;
              border-color: #3b82f6;

              &::after {
                opacity: 1;
              }
            }
          }

          .notification-icon {
            position: relative;
            flex-shrink: 0;
            margin-top: 0.25rem;

            .icon-background {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2px solid transparent;

              :deep(svg) {
                width: 18px;
                height: 18px;
              }
            }

            .unread-dot {
              position: absolute;
              top: -2px;
              right: -2px;
              width: 8px;
              height: 8px;
              background: #3b82f6;
              border-radius: 50%;
              border: 2px solid white;
            }

            &.activity .icon-background {
              background: #dbeafe;
              color: #1d4ed8;
            }

            &.comment .icon-background {
              background: #dcfce7;
              color: #166534;
            }

            &.like .icon-background {
              background: #fecaca;
              color: #dc2626;
            }

            &.mention .icon-background {
              background: #fef3c7;
              color: #92400e;
            }

            &.system .icon-background {
              background: #e5e7eb;
              color: #374151;
            }

            &.media .icon-background {
              background: #ede9fe;
              color: #7c3aed;
            }

            &.reminder .icon-background {
              background: #fed7d7;
              color: #c53030;
            }
          }

          .notification-content {
            flex: 1;
            min-width: 0;

            .notification-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 0.5rem;

              .notification-title {
                color: #1e293b;
                font-size: 0.9rem;
                font-weight: 500;
                margin: 0;
                line-height: 1.4;
              }

              .notification-meta {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                flex-shrink: 0;
                margin-left: 0.75rem;

                .notification-time {
                  font-size: 0.75rem;
                  color: #9ca3af;
                  white-space: nowrap;
                }

                .priority-badge {
                  display: flex;
                  align-items: center;
                  gap: 0.25rem;
                  padding: 0.125rem 0.375rem;
                  background: #fef3c7;
                  color: #92400e;
                  border-radius: 12px;
                  font-size: 0.7rem;
                  font-weight: 500;

                  svg {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }

            .notification-body {
              .notification-message {
                color: #64748b;
                font-size: 0.85rem;
                line-height: 1.5;
                margin: 0 0 0.75rem 0;
              }

              .notification-data {
                margin-bottom: 0.75rem;

                .notification-user {
                  display: flex;
                  align-items: center;
                  gap: 0.5rem;

                  .user-avatar {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }

                    .avatar-placeholder {
                      width: 100%;
                      height: 100%;
                      background: #e5e7eb;
                      color: #6b7280;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 0.7rem;
                      font-weight: 600;
                    }
                  }

                  .user-name {
                    font-weight: 500;
                    color: #374151;
                    font-size: 0.8rem;
                  }
                }

                .notification-activity,
                .notification-media {
                  padding: 0.75rem;
                  background: #f8fafc;
                  border: 1px solid #e2e8f0;
                  border-radius: 8px;

                  .activity-info,
                  .media-info {
                    .activity-title,
                    .media-name {
                      font-size: 0.85rem;
                      font-weight: 500;
                      color: #374151;
                      margin: 0 0 0.25rem 0;
                    }

                    .activity-time,
                    .media-type {
                      font-size: 0.75rem;
                      color: #6b7280;
                    }
                  }
                }

                .notification-media {
                  display: flex;
                  gap: 0.75rem;
                  align-items: center;

                  .media-thumbnail {
                    width: 40px;
                    height: 40px;
                    border-radius: 6px;
                    overflow: hidden;
                    flex-shrink: 0;

                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }
                  }
                }
              }

              .notification-actions {
                display: flex;
                gap: 0.5rem;

                .action-btn {
                  display: flex;
                  align-items: center;
                  gap: 0.375rem;
                  padding: 0.375rem 0.75rem;
                  border-radius: 6px;
                  border: 1px solid #d1d5db;
                  background: white;
                  color: #374151;
                  cursor: pointer;
                  font-size: 0.8rem;
                  transition: all 0.2s ease;

                  &:hover {
                    background: #f9fafb;
                    border-color: #9ca3af;
                  }

                  &.primary {
                    background: #3b82f6;
                    border-color: #3b82f6;
                    color: white;

                    &:hover {
                      background: #2563eb;
                    }
                  }

                  &.danger {
                    background: #ef4444;
                    border-color: #ef4444;
                    color: white;

                    &:hover {
                      background: #dc2626;
                    }
                  }

                  svg {
                    width: 12px;
                    height: 12px;
                  }
                }
              }
            }
          }

          .notification-menu {
            position: relative;
            flex-shrink: 0;

            .menu-trigger {
              width: 32px;
              height: 32px;
              border: none;
              background: transparent;
              color: #9ca3af;
              cursor: pointer;
              border-radius: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;

              &:hover {
                background: #f3f4f6;
                color: #6b7280;
              }

              svg {
                width: 16px;
                height: 16px;
              }
            }

            .menu-dropdown {
              position: absolute;
              top: 100%;
              right: 0;
              background: white;
              border: 1px solid #e5e7eb;
              border-radius: 8px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              z-index: 10;
              min-width: 140px;
              overflow: hidden;

              .menu-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                width: 100%;
                padding: 0.75rem 1rem;
                border: none;
                background: none;
                text-align: left;
                color: #374151;
                cursor: pointer;
                font-size: 0.85rem;
                transition: background 0.2s ease;

                &:hover {
                  background: #f3f4f6;
                }

                &.danger {
                  color: #ef4444;

                  &:hover {
                    background: #fef2f2;
                  }
                }

                svg {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
      }

      .load-more-section {
        padding: 1rem;
        text-align: center;
        border-top: 1px solid #f1f5f9;

        .load-more-btn {
          padding: 0.5rem 1rem;
          background: #f3f4f6;
          color: #6b7280;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 0.85rem;
          transition: all 0.2s ease;

          &:hover {
            background: #e5e7eb;
            color: #374151;
          }
        }
      }
    }

    .bulk-actions-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1.5rem;
      border-top: 1px solid #e5e7eb;
      background: #f8fafc;

      .selected-info {
        font-size: 0.85rem;
        color: #6b7280;
        font-weight: 500;
      }

      .bulk-actions {
        display: flex;
        gap: 0.5rem;

        .bulk-action-btn {
          display: flex;
          align-items: center;
          gap: 0.375rem;
          padding: 0.375rem 0.75rem;
          background: transparent;
          border: 1px solid #d1d5db;
          border-radius: 6px;
          color: #374151;
          cursor: pointer;
          font-size: 0.8rem;
          transition: all 0.2s ease;

          &:hover {
            background: #f9fafb;
            border-color: #9ca3af;
          }

          &.danger {
            color: #ef4444;
            border-color: #ef4444;

            &:hover {
              background: #fef2f2;
            }
          }

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }

  .notification-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 40;
  }

  .settings-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 400px;
    max-height: 80vh;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 51;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;

    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      border-bottom: 1px solid #f1f5f9;
      background: #f8fafc;

      h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #9ca3af;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover {
          background: #f3f4f6;
          color: #6b7280;
        }

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }

    .settings-content {
      max-height: 60vh;
      overflow-y: auto;

      .settings-section {
        padding: 1.5rem;
        border-bottom: 1px solid #f8fafc;

        &:last-child {
          border-bottom: none;
        }

        h4 {
          margin: 0 0 1rem 0;
          font-size: 0.95rem;
          font-weight: 600;
          color: #374151;
        }

        .setting-group {
          display: flex;
          flex-direction: column;
          gap: 1rem;

          .setting-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            cursor: pointer;

            input[type="checkbox"] {
              display: none;
            }

            .checkbox-custom {
              width: 18px;
              height: 18px;
              border: 2px solid #d1d5db;
              border-radius: 4px;
              position: relative;
              margin-top: 0.125rem;
              flex-shrink: 0;
              transition: all 0.2s ease;

              &::after {
                content: '✓';
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 12px;
                font-weight: bold;
                opacity: 0;
                transition: opacity 0.2s ease;
              }
            }

            input:checked + .checkbox-custom {
              background: #3b82f6;
              border-color: #3b82f6;

              &::after {
                opacity: 1;
              }
            }

            .setting-text {
              font-size: 0.9rem;
              color: #374151;
              font-weight: 500;
            }

            .setting-info {
              display: flex;
              flex-direction: column;
              gap: 0.25rem;

              .setting-desc {
                font-size: 0.8rem;
                color: #6b7280;
                line-height: 1.4;
              }
            }
          }

          .time-range-setting {
            margin-top: 0.75rem;
            padding: 1rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            display: flex;
            gap: 1rem;

            .time-input-group {
              flex: 1;

              label {
                display: block;
                font-size: 0.8rem;
                color: #6b7280;
                margin-bottom: 0.5rem;
                font-weight: 500;
              }

              input[type="time"] {
                width: 100%;
                padding: 0.5rem;
                border: 1px solid #d1d5db;
                border-radius: 6px;
                font-size: 0.85rem;
                background: white;

                &:focus {
                  outline: none;
                  border-color: #3b82f6;
                  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
                }
              }
            }
          }
        }
      }
    }

    .settings-footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.75rem;
      padding: 1rem 1.5rem;
      border-top: 1px solid #f1f5f9;
      background: #f8fafc;

      .settings-btn {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s ease;

        &.secondary {
          background: #f3f4f6;
          color: #374151;

          &:hover {
            background: #e5e7eb;
          }
        }

        &.primary {
          background: #3b82f6;
          color: white;

          &:hover {
            background: #2563eb;
          }
        }
      }
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .notification-center {
    .notification-panel,
    .settings-panel {
      position: fixed;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 100vh;
      max-height: none;
      border-radius: 0;

      .notifications-container {
        max-height: calc(100vh - 200px);
      }

      .notifications-list .notification-item {
        padding: 1rem;

        .notification-content {
          .notification-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;

            .notification-meta {
              margin-left: 0;
            }
          }

          .notification-body .notification-actions {
            flex-direction: column;

            .action-btn {
              justify-content: center;
            }
          }
        }
      }
    }
  }
}

// 暗色模式
@media (prefers-color-scheme: dark) {
  .notification-center {
    .trigger-btn {
      background: #374151;
      color: #9ca3af;

      &:hover {
        background: #4b5563;
        color: #d1d5db;
      }

      &.has-unread {
        background: #1e3a8a;
        color: #93c5fd;

        &:hover {
          background: #1e40af;
        }
      }
    }

    .notification-panel,
    .settings-panel {
      background: #1f2937;
      border-color: #374151;

      .panel-header,
      .settings-header {
        background: #111827;
        border-bottom-color: #374151;

        h3 {
          color: #f9fafb;
        }

        .unread-info {
          color: #9ca3af;
        }
      }

      .filter-tabs .filter-tab {
        border-color: #4b5563;
        color: #9ca3af;

        &:hover {
          background: #374151;
          border-color: #6b7280;
        }

        &:not(.active) .tab-count {
          background: #374151;
          color: #9ca3af;
        }
      }

      .notification-item {
        border-bottom-color: #374151;

        &:hover {
          background: #374151;
        }

        &.is-unread {
          background: #1e3a8a;
        }

        .notification-title {
          color: #f9fafb;
        }

        .notification-message {
          color: #d1d5db;
        }
      }
    }
  }
}
</style>
